<template>
  <div>
    <px-row style="height: 64px">
      <px-col :span="24" class="water_col">
        <div class="waterdom borderRidus boxShadow">
          <px-form ref="queryRef" class="custom-form-ui" :model="queryParams" :inline="true" label-width="90px">
            <px-form-item label="系统">
              <px-select v-model="queryParams.systemCode" placeholder="请选择" clearable style="width: 210px" filterable @change="selectSystem">
                <px-option v-for="dict in syetemList" :key="dict.id" :label="dict.itemName" :value="dict.itemValue" />
              </px-select>
            </px-form-item>
            <px-form-item label="取样点">
              <px-select v-model="queryParams.samplingLocationCode" placeholder="请选择" clearable style="width: 240px" filterable>
                <px-option v-for="dict in samplingLocationList" :key="dict.id" :label="dict.itemName" :value="dict.itemValue" />
              </px-select>
            </px-form-item>
            <!-- <px-form-item v-if="queryParams.systemCode === 'FS'" label="检测项目">
              <px-select v-model="queryParams.testItem" placeholder="请选择" clearable style="width: 240px" filterable>
                <px-option v-for="dict in testItemList" :key="dict.id" :label="dict.itemName" :value="dict.itemValue" />
              </px-select>
            </px-form-item> -->
            <px-form-item label="取样日期" style="width: 516px !important">
              <px-date-picker
                v-model="dateRange"
                type="datetimerange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                :default-time="defaultTime"
              />
            </px-form-item>
            <px-button style="margin-top: -17px" type="primary" icon="" @click="handleQuery()">查询</px-button>
            <!-- <px-button style="margin-top: -17px" icon="" @click="resetQuery">重置</px-button> -->
          </px-form>
        </div>
      </px-col>
    </px-row>
    <px-row v-if="chartsList.length > 0" style="height: 360px; margin-top: 16px" :gutter="16">
      <px-col v-for="(item, index) in chartsList" :key="index" :span="12" class="water_col" style="margin-bottom: 16px">
        <div class="waterdom borderRidus boxShadow">
          <modelTitle :title="item.itemName" />
          <div class="model_chart" style="margin-top: 16px">
            <chartswwt style="width: 100%" :chartvlue="item" :systemCode="queryParams.systemCode" :width="'100%'" :height="'290px'" />
          </div>
        </div>
      </px-col>
    </px-row>
    <px-empty v-else description="暂无数据" />
  </div>
</template>
<script setup lang="ts">
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import chartswwt from "./components/chartswwt.vue";
import { getCurrentInstance, ref, toRefs, reactive, onMounted } from "vue";
import { queryChildByTypeCodeAndItemValue } from "@/api/waterClass";
import { testQualityqueryReport } from "@/api/waterQualityDetection";
import { PxMessage, PxMessageBox } from "px-ui";
const data = reactive({
  queryParams: {
    systemCode: "",
    samplingLocationCode: "",
    testItem: "",
    samplingTimeStart: "",
    samplingTimeEnd: ""
  },
  tableData: [
    {
      taskNo: "1",
      taskName: "任务名称",
      responsible: "责任人",
      status: "ONGOING"
    }
  ],
  syetemList: [],
  samplingLocationList: [],
  dateRange: [],
  testItemList: [],
  chartsList: []
});

const { queryParams, tableData, syetemList, samplingLocationList, dateRange, testItemList, chartsList } = toRefs(data);

const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 1), new Date(2000, 1, 1, 23, 59, 59)];
const getqueryCategoryList = () => {
  queryChildByTypeCodeAndItemValue({
    value: "WATER_SYSTEM",
    typeCode: "WTTS"
  }).then((response: any) => {
    //console.log(response);
    syetemList.value = response;
    queryParams.value.systemCode = response[0].itemValue;
    queryChildByTypeCodeAndItemValue({
      value: "SP0104",
      typeCode: "WTTS"
    }).then((response: any) => {
      //console.log(response);
      samplingLocationList.value = response;
      if (queryParams.value.systemCode === "CS") {
        queryParams.value.samplingLocationCode = response[1].itemValue;
      } else {
        queryParams.value.samplingLocationCode = response[0].itemValue;
      }
      handleQuery();
    });
    queryChildByTypeCodeAndItemValue({
      value: "WTTSTI01AV02",
      typeCode: "WTTS"
    }).then((response: any) => {
      //console.log(response);
      testItemList.value = response;
    });
  });
  const end = new Date();
  end.setHours(23, 59, 59, 0);
  end.setTime(end.getTime());
  const start = new Date();
  start.setHours(0, 0, 0, 0);
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  dateRange.value = [formatDate(start), formatDate(end)];
};
function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const h = date.getHours().toString().padStart(2, "0");
  const m = date.getMinutes().toString().padStart(2, "0");
  const s = date.getSeconds().toString().padStart(2, "0");
  return `${year}-${month}-${day} ${h}:${m}:${s}`;
}
getqueryCategoryList();
const handleQuery = () => {
  if (dateRange.value == null) {
    PxMessage({
      message: "请选择取样时间",
      type: "error"
    });
  } else {
    let parmas = {
      systemCode: queryParams.value.systemCode,
      samplingLocationCode: queryParams.value.samplingLocationCode,
      testItem: "",
      samplingTimeStart: dateRange.value[0],
      samplingTimeEnd: dateRange.value[1]
    };
    testQualityqueryReport(parmas).then(res => {
      if (res != null) {
        if (queryParams.value.systemCode === "CS") {
          const metalList = res.filter(item => item.groupName === "Metal Impurity");
          const anionsList = res.filter(item => item.groupName === "Anions");
          const cationList = res.filter(item => item.groupName === "Cation");
          const countList = res.filter(item => item.groupName === "Count/ml");
          const list = [
            {
              groupName: metalList[0]?.groupName,
              itemName: "金属离子",
              max: metalList[0]?.max,
              min: metalList[0]?.min,
              unit: metalList[0]?.unit,
              details: metalList
            },
            {
              groupName: cationList[0]?.groupName,
              itemName: "阳离子",
              max: cationList[0]?.max,
              min: cationList[0]?.min,
              unit: cationList[0]?.unit,
              details: cationList
            },
            {
              groupName: anionsList[0]?.groupName,
              itemName: "阴离子",
              max: anionsList[0]?.max,
              min: anionsList[0]?.min,
              unit: anionsList[0]?.unit,
              details: anionsList
            },
            {
              groupName: countList[0]?.groupName,
              itemName: "细菌",
              max: countList[0]?.max,
              min: countList[0]?.min,
              unit: countList[0]?.unit,
              details: countList
            }
          ];
          chartsList.value = list.filter(item => item.details.length > 0);
        } else {
          chartsList.value = res;
        }
      } else {
        chartsList.value = [];
      }
    });
  }
};
const resetQuery = () => {
  queryParams.value = {
    systemCode: "",
    samplingLocationCode: "",
    testItem: "",
    samplingTimeStart: "",
    samplingTimeEnd: ""
  };
  dateRange.value = [];
};

const selectSystem = val => {
  if (val == "FS") {
    queryChildByTypeCodeAndItemValue({
      value: "SP0103",
      typeCode: "WTTS"
    }).then((response: any) => {
      //console.log(response);
      samplingLocationList.value = response;
      queryParams.value.samplingLocationCode = response[0].itemValue;
    });
    queryChildByTypeCodeAndItemValue({
      value: "WTTSTI01AV01",
      typeCode: "WTTS"
    }).then((response: any) => {
      //console.log(response);
      testItemList.value = response;
      queryParams.value.testItem = response[0].itemValue;
    });
  }
  if (val == "CS") {
    queryChildByTypeCodeAndItemValue({
      value: "SP0104",
      typeCode: "WTTS"
    }).then((response: any) => {
      //console.log(response);
      samplingLocationList.value = response;
      queryParams.value.samplingLocationCode = response[0].itemValue;
    });
    queryChildByTypeCodeAndItemValue({
      value: "WTTSTI01AV02",
      typeCode: "WTTS"
    }).then((response: any) => {
      //console.log(response);
      testItemList.value = response;
      queryParams.value.testItem = response[0].itemValue;
    });
  }
};
</script>

<style scoped lang="scss">
.water_col {
  height: 100%;
}

.waterdom {
  width: 100%;
  height: 100%;
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 4px;
}

.first_width {
  width: calc(100% - 16px);
}

.model_chart {
  position: relative;
  width: 100%;
  height: calc(100% - 40px);
  margin-top: 10px;

  .co2img {
    position: absolute;
    top: 32px;
    left: 22px;
    width: 32px;
    height: 32px;
  }

  .titlep {
    position: absolute;
    top: 29px;
    left: 70px;
    font-size: 16px;
    font-weight: 400;
    color: #000;
  }

  .titlevalue {
    position: absolute;
    top: 55px;
    left: 70px;

    .titlevalue1 {
      float: left;
      font-size: 20px;
      font-weight: 600;
      line-height: 28px;
      color: #3b82f6;
    }

    .titlevalue1span {
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      color: #4f4f4f;
    }

    .titlevalue2 {
      float: left;
      margin-top: 5px;
      margin-left: 20px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
    }

    .titlevalue2span {
      display: inline-block;
      margin-left: 8px;
      font-size: 14px;
      line-height: 20px;
      color: #f87171;
    }
  }

  .co2mian {
    position: absolute;
    top: 112px;
    left: 0;
    width: 100%;
    height: 92px;
  }

  .co2mianleft {
    float: left;
    width: 50%;
    height: 100%;

    .co2mianleftp {
      width: calc(100% - 21px);
      height: 22px;
      padding-left: 20px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
      border-right: 1px solid #cbcdd8;
    }
  }

  .co2mianright {
    float: left;
    width: 50%;
    height: 100%;

    .co2mianrightp {
      width: calc(100% - 45px);
      height: 22px;
      padding-left: 45px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
    }
  }

  .co2mianleftp2 {
    margin-left: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #3b82f6;

    .co2mianleftp2span {
      font-size: 14px;
      font-weight: 400;
      color: #4f4f4f;
    }
  }

  .co2mianleftp3 {
    float: left;
    margin-left: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #000;

    .titlevalue2span {
      display: inline-block;
      margin-left: 8px;
      font-size: 14px;
      line-height: 20px;
      color: #34d399;
    }
  }
}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 26px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 16px;
}

.percentage-value2 {
  display: block;
  margin-top: 10px;
  font-size: 20px;
}

.percentage-label2 {
  display: block;
  margin-top: 10px;
  font-size: 14px;
}

.percentage-value3 {
  display: block;
  margin-top: 10px;
  font-size: 20px;
  color: #f00;
}

.percentage-label3 {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: #f00;
}

.jindu1 {
  margin: 24px 0 0 17px;
}

.jindu2 {
  margin: 38px calc((100% - 103px) / 2);
}

.jindu1p {
  width: calc(100% - 24px);
  margin-top: 0;
  font-size: 16px;
  text-align: center;
}

.jindu2p {
  width: 100%;
  margin-top: -40px;
  font-size: 14px;
  text-align: center;
}

:deep(.px-table) {
  .px-table__cell {
    padding: 6px 0;
  }

  td,
  tr {
    border: none;
  }

  .px-table__header-wrapper,
  .px-table__fixed-header-wrapper {
    th {
      background-color: white !important;
    }
  }
}

:deep(.px-table--striped .px-table__body tr.px-table__row--striped td.px-table__cell) {
  background-color: rgb(231 238 251 / 50%) !important;
}

:deep(.px-table__inner-wrapper::before) {
  background: none;
}
</style>
